<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no, viewport-fit=cover" />

    <meta http-equiv="content-security-policy" content="upgrade-insecure-requests">
    <meta content="yes" name="apple-mobile-web-app-capable" />

    <meta content="yes" name="apple-touch-fullscreen" />

    <meta content="telephone=no,email=no" name="format-detection" />
    <script src="https://oss.chathot.me/action/js/loading.js?v=0.234"></script>
    <script src="https://oss.chathot.me/action/js/vue.min.js"></script>
    <script src="https://oss.chathot.me/action/mobile_js/mobile_until.js?v=3435635"></script>
    <link rel='stylesheet' href="https://oss.chathot.me/action/mobile_js/var.css?v=.12121">
    <script src="js/lan.js?v=156"></script>
    <link rel="stylesheet" href="./css/page.css?v=133">
    <script src="https://oss.chathot.me/action/vue_component/mark_box/mark_box.js?v=0.212"></script>


</head>

<body>
    <div id="page">
        <div class="top">
            <img :src="lan.top" alt="">
        </div>
        <div class="mt_4">
            <div class="content">
                {{lan.a1}}
            </div>
            <div class="content mt68 padding_none">
                <div :style="{
                        'font-size': currentLan === 'id' && '0.28rem',
                    }" class="title">{{lan.a2}}</div>

                <div class="avction">
                    <div v-for="(item,index) in roomlist" @click="setTxt(item)">
                        <img :src="item.avatar" alt="">
                        <p>{{item.tit}}</p>
                    </div>
                </div>
                <div class="atxt">
                    {{lan.a9}}
                </div>

            </div>

            <div class="content mt68 padding_none">
                <div :style="{
                        'font-size': currentLan === 'id' && '0.28rem',
                    }" class="title">{{lan.a10}}</div>
                <div class="atxt">
                    {{lan.a10_2}}
                </div>
                <div class="atxt">
                    {{lan.a11}}
                </div>
                <div v-if="currentLan === 'id'" class="table_box m-1">
                    <img src="https://oss.chathot.me/action/activityhtml/roomActivityInHiTr/page-img2.png" alt="">
                </div>
                <div class="table_box m-1">
                    <img src="https://oss.chathot.me/action/2021/08/13/p1.png" alt="">
                </div>
                <div class="table_box ">
                    <table border="1" cellspacing="0">
                        <tr>
                            <th>{{lan.a12_1}}</th>
                            <th v-if="currentLan !== 'id'">{{lan.a20}}</th>
                            <th>{{lan.a21}}</th>
                            <th>{{lan.a13}}</th>
                        </tr>
                        <tr v-for="(item,index) in list">
                            <td v-for="ite in item" v-if="!Array.isArray(ite)">{{ite}}</td>
                            <td v-for="ite in item" v-if="Array.isArray(ite)">
                                <div class="gift">
                                    <div v-for="(ie,inx) in ite">
                                        <img :src="ie.type==1?'https://oss.chathot.me/action/2021/08/13/p3.png': ie.type== 2 ? 'https://oss.chathot.me/action/activityhtml/roomActivityInHiTr/broadcast-card.png?v=2' :'https://oss.chathot.me/action/2021/08/13/p4.png'"
                                            alt="">
                                        <!-- <p> {{inx==0?lan.a34:''}}</p> -->
                                        <p>
                                            <span v-if="ie.type!=1">{{ie.value}}</span>
                                            <span
                                                v-html="ie.type==1 ? lan.a34.replace('lzTemplate', ie.value) : ''"></span>
                                        </p>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </table>

                </div>
                <div class="atxt m-3">
                    {{lan.a14}}
                </div>
            </div>

            <div class="content mt68 padding_none">
                <div class="title">{{lan.a15}}</div>

                <div class="table_box">
                    <img src="https://oss.chathot.me/action/activityhtml/roomActivityInHiTr/page-img1.png" alt="">
                </div>
                <div class="atxt m-3">
                    <p>{{lan.a16}}</p>
                    <p class="mt3">{{lan.a17}}</p>
                    <p class="mt3">{{lan.a18}}</p>
                </div>

            </div>


            <div class="content mt68">
                <div class="title">{{lan.a23}}</div>

                <div>
                    <span class="icon">{{lan.a24}}</span>
                    {{lan.a24_1}}
                </div>

                <div class="mt3">
                    <span class="icon">{{lan.a25}}</span>
                    {{lan.a25_1}}
                </div>
            </div>


            <div class="content mt2 icon_box">
                <!-- <div>
                <div class="room" @click="roomDetails">
                    <img src="https://oss.chathot.me/action/2021/07/20/img1.png" alt="">
                </div>
                <div class="text_center m1">RoomID:10016</div>
            </div> -->

                <div class="user mt3">
                    <div v-for="item in user_list">
                        <!-- <div class="user_img" @click="go_user(item.id)"> -->
                        <div class="user_img" @click="roomDetails(item.id, item.idText)">
                            <img :src="item.img" alt="">
                        </div>
                        <p class="m1 t_">{{item.no}}</p>
                        <p>{{item.t}}</p>
                    </div>
                </div>

                <div class="mt4">
                    <p>{{lan.a26}}</p>
                    <p>{{lan.a26_1}}</p>
                    <p>{{lan.a26_2}}</p>
                    <p>{{lan.a26_3}}</p>
                    <!-- <p class="color_00ffcc mt4">{{lan.a33}}</p> -->
                </div>


            </div>


        </div>
        <div class="footer">
            {{ lan.k24 }}
        </div>

        <!--提示弹出-->
        <markbox v-if="isRule">
            <div class="mark_box" slot="markMsg" @click="isRule=false">
                <div class="roomMsg">
                    <div class="r_img">
                        <img style="border-radius: 0.2rem" :src="showMsg.b" alt="">
                    </div>
                    <div class="mt3">
                        <div class="r_T">
                            {{showMsg.tit}}
                        </div>
                        <div class="r_txt mt2">
                            <p v-for="ite in showMsg.x">{{ite}}</p>
                            <p>{{showMsg.t}}</p>
                            <p>{{showMsg.r}}</p>

                        </div>
                    </div>

                    <div class="goRoom">
                        <div></div>
                        <div class="sr">
                            <img src="https://oss.chathot.me/action/2021/08/13/t5.png" alt="">
                        </div>

                    </div>
                    <div @click="istop=isRule" class="colse">

                    </div>

                </div>

            </div>
        </markbox>

    </div>

    <script>
        if (GetUrlParam('language') == 'ar') {
            document.getElementsByTagName('body')[0].className = 'ar_text'

        }
        new Vue({
            el: '#page',
            data: function () {
                return {
                    isRule: false,
                    lan: {},
                    list: [],
                    user_list: [],
                    roomlist: [],
                    showMsg: {},
                    currentLan: 'id', // tr id hi
                }
            },
            created: function () {
                var lan = this.lan = judge_lan(this.currentLan, language);
                document.title = lan.a0;
                // type 1 礼物 2 广播卡 3 置顶卡
                if (this.currentLan === 'tr') {
                    this.user_list = [
                        {
                            img: 'https://oss.chathot.me/action/2021/07/20/img1.png',
                            no: '10020',
                            id: '451892',
                            idText: 'chinese451892',
                            t: '',
                        },
                        {
                            img: 'https://oss.chathot.me/action/2021/07/20/img1.png',
                            no: '10022',
                            id: '47826',
                            idText: 'chinese47826',
                            t: '',
                        },
                    ];
                    this.list = [
                        [100, 15, 50000, [{
                            type: 1,
                            value: 4000,
                        }, {
                            type: 2,
                            value: '*2',
                        }]],
                        [200, 20, 100000, [{
                            type: 1,
                            value: 8000,
                        }, {
                            type: 2,
                            value: '*4',
                        }]],
                        [400, 20, 200000, [{
                            type: 1,
                            value: 16000,
                        }, {
                            type: 2,
                            value: '*6',
                        }]],
                        [600, 30, 300000, [{
                            type: 1,
                            value: 24000,
                        }, {
                            type: 2,
                            value: '*2',
                        }, {
                            type: 3,
                            value: '*1',
                        }]],
                        [800, 40, 400000, [{
                            type: 1,
                            value: 32000,
                        }, {
                            type: 2,
                            value: '*4',
                        }, {
                            type: 3,
                            value: '*1',
                        }]],
                        [1000, 50, 500000, [{
                            type: 1,
                            value: 40000,
                        }, {
                            type: 2,
                            value: '*6',
                        }, {
                            type: 3,
                            value: '*1',
                        }]],
                    ]
                } else if (this.currentLan === 'id') {
                    this.user_list = [
                        {
                            img: 'https://oss.chathot.me/action/2021/07/20/img1.png',
                            no: '10051',
                            id: '13164',
                            idText: 'chinese13164',
                            t: '',
                        },
                    ];
                    this.list = [
                        [100, 20000, [{
                            type: 1,
                            value: 600,
                        }, {
                            type: 2,
                            value: '*1',
                        }]],
                        [100, 35000, [{
                            type: 1,
                            value: 1050,
                        }, {
                            type: 2,
                            value: '*2',
                        }]],
                        [100, 50000, [{
                            type: 1,
                            value: 1500,
                        }, {
                            type: 2,
                            value: '*3',
                        }]],
                        [100, 100000, [{
                            type: 1,
                            value: 3000,
                        }, {
                            type: 2,
                            value: '*3',
                        }]],
                        [200, 200000, [{
                            type: 1,
                            value: 6000,
                        }, {
                            type: 3,
                            value: '*1',
                        }]],
                        [400, 300000, [{
                            type: 1,
                            value: 9000,
                        }, {
                            type: 3,
                            value: '*1',
                        }]],
                        [400, 400000, [{
                            type: 1,
                            value: 12000,
                        }, {
                            type: 3,
                            value: '*1',
                        }]],
                        [600, 500000, [{
                            type: 1,
                            value: 15000,
                        }, {
                            type: 3,
                            value: '*1',
                        }]],
                        [600, 600000, [{
                            type: 1,
                            value: 18000,
                        }, {
                            type: 3,
                            value: '*1',
                        }]],
                        [800, 800000, [{
                            type: 1,
                            value: 24000,
                        }, {
                            type: 3,
                            value: '*1',
                        }]],
                    ]
                } else if (this.currentLan === 'hi') {
                    this.user_list = [
                        {
                            img: 'https://oss.chathot.me/action/2021/07/20/img1.png',
                            no: '10072',
                            id: '644254',
                            idText: 'chinese644254',
                            t: '',
                        },
                    ];
                    this.list = [
                        [100, 15, 50000, [{
                            type: 1,
                            value: 4000,
                        }, {
                            type: 2,
                            value: '*2',
                        }]],
                        [200, 20, 100000, [{
                            type: 1,
                            value: 8000,
                        }, {
                            type: 2,
                            value: '*4',
                        }]],
                        [400, 20, 200000, [{
                            type: 1,
                            value: 16000,
                        }, {
                            type: 2,
                            value: '*6',
                        }]],
                        [600, 30, 300000, [{
                            type: 1,
                            value: 24000,
                        }, {
                            type: 2,
                            value: '*2',
                        }, {
                            type: 3,
                            value: '*1',
                        }]],
                        [800, 40, 400000, [{
                            type: 1,
                            value: 32000,
                        }, {
                            type: 2,
                            value: '*4',
                        }, {
                            type: 3,
                            value: '*1',
                        }]],
                        [1000, 50, 500000, [{
                            type: 1,
                            value: 40000,
                        }, {
                            type: 2,
                            value: '*6',
                        }, {
                            type: 3,
                            value: '*1',
                        }]],
                    ];
                }

                this.roomlist = [
                    {
                        avatar: 'https://oss.chathot.me/action/activityhtml/roomActivityInHiTr/page-path1-s-' + this.currentLan + '.png?v=4',
                        b: 'https://oss.chathot.me/action/activityhtml/roomActivityInHiTr/page-path1-b-' + this.currentLan + '.png',
                        tit: lan.k0,
                        // x: [lan.k6,lan.k6_1,lan.k6_2,lan.k6_3,lan.k6_4,lan.k6_5,lan.k6_6],
                        x: [lan.k6],
                        t: lan.k12,
                        r: lan.k18,
                    },
                    {
                        avatar: 'https://oss.chathot.me/action/activityhtml/roomActivityInHiTr/page-path2-s-' + this.currentLan + '.png?v=4',
                        b: 'https://oss.chathot.me/action/activityhtml/roomActivityInHiTr/page-path2-b-' + this.currentLan + '.png',

                        tit: lan.k1,
                        x: [lan.k7],
                        t: lan.k13,
                        r: lan.k19,
                    },
                    {
                        avatar: 'https://oss.chathot.me/action/activityhtml/roomActivityInHiTr/page-path3-s-' + this.currentLan + '.png',
                        b: 'https://oss.chathot.me/action/activityhtml/roomActivityInHiTr/page-path3-b-' + this.currentLan + '.png',

                        tit: lan.k2,
                        x: [lan.k8],
                        t: lan.k14,
                        r: lan.k20,
                    },
                    {
                        avatar: 'https://oss.chathot.me/action/activityhtml/roomActivityInHiTr/page-path4-s-' + this.currentLan + '.png',
                        b: 'https://oss.chathot.me/action/activityhtml/roomActivityInHiTr/page-path4-b-' + this.currentLan + '.png',

                        tit: lan.k3,
                        x: [lan.k9],
                        t: lan.k15,
                        r: lan.k21,
                    },
                    {
                        avatar: 'https://oss.chathot.me/action/activityhtml/roomActivityInHiTr/page-path5-s-' + this.currentLan + '.png',
                        b: 'https://oss.chathot.me/action/activityhtml/roomActivityInHiTr/page-path5-b-' + this.currentLan + '.png',

                        tit: lan.k4,
                        x: [lan.k10],
                        t: lan.k16,
                        r: lan.k22,
                    },
                    {
                        avatar: 'https://oss.chathot.me/action/activityhtml/roomActivityInHiTr/page-path6-s-' + this.currentLan + '.png?v=2',
                        b: 'https://oss.chathot.me/action/activityhtml/roomActivityInHiTr/page-path6-b-' + this.currentLan + '.png?v=2',

                        tit: lan.k5,
                        x: [lan.k11],
                        t: lan.k17,
                        r: lan.k23,
                    },
                ]
                // 图片预加载
                for (var imgIndex = 0; imgIndex < this.roomlist.length; imgIndex++) {
                    var imgItem = this.roomlist[imgIndex];
                    var oImage = new Image();
                    oImage.src = imgItem.b;
                }
            },
            methods: {
                setTxt(msg) {
                    this.showMsg = msg;
                    this.isRule = true
                },
                // 跳转个人主页
                go_user(id) {
                    userDetails(id);

                },
                // 房间跳转
                roomDetails(id, idText) {
                    // roomDetails('451334', '', 'chinese451334')
                    console.log(id, '', idText);
                    roomDetails(id, '', idText)

                },
            },
            mounted: function () {
                var height = document.documentElement.clientHeight || document.body.clientHeight;
                var page = document.querySelector('#page');
                page.style.minHeight = height + 'px';
            }

        })

    </script>
</body>

</html>